import { writing_types } from '@/services/ant-design-pro/docList';
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import DocLists from './com/docLists';
import DocType from './com/docType';
// import FloatDialog from './com/floatDialog';
import AvatarButton from './com/avatarButton';
import './index.less';
// 图片
// 有历史记录组件
const WriteHome: React.FC = (props) => {
  const [docTypeList, setDocTypeList] = useState<any[]>([]); //公文类型列表

  //获取公文类型列表
  const getWriting_types = async () => {
    const res = await writing_types({});
    if (res.code === 0) {
      setDocTypeList(res.data);
      props.dispatch({
        type: 'writingTypeModel/updateTypeList',
        payload: res.data,
      });
      //新增
    } else {
      message.open({
        type: 'error',
        content: res.msg,
      });
    }
  };
  // 监听网页的resize事件 防抖
  useEffect(() => {
    getWriting_types(); //获取公文类型列表
  }, []);

  // const btnColorList = ['#8585D2', '#7DAB80', '#75A7E2', '#8396A4', '#C0BF9B']; //示例按钮字体颜色列表 与公文列表里的frontend_code对应
  const btnColorList = [
    '',
    '',
    '#7DAB80',
    '',
    '',
    '#BA99D7',
    '#D7B27B',
    '#5769BB',
    '#5A86D6',
    '#6299DF',
  ]; //示例按钮字体颜色列表 与公文列表里的frontend_code对应
  const expandBgColor = ['#5669BB', '#B999D7', '#D7B27B']; //拓展的颜色
  //根据id匹配公文类型
  const filterType = (id: any) => {
    let typeTitle = '';
    let frontend_code: any = '0';
    docTypeList.forEach((typeItem) => {
      if (typeItem.id === id) {
        typeTitle = typeItem.display_name;
        frontend_code = typeItem.frontend_code;
      }
    });
    const bgColorIndex = frontend_code - 1;
    const expandBgColorIndex = (bgColorIndex - 1) % expandBgColor.length; //轮流显示拓展的颜色

    return {
      frontend_code, //公文类型对应code
      typeTitle, //公文类型文字
      color: btnColorList[frontend_code - 1] || expandBgColor[expandBgColorIndex], //颜色
    };
  };

  return (
    <div className="page-container">
      <div className="statefulComponent" style={{ backgroundColor: '#F7F7FA' }}>
        {/* <FloatDialog></FloatDialog> */}
        <AvatarButton></AvatarButton>
        <DocType
          docTypeList={docTypeList}
          btnColorList={btnColorList}
          expandBgColor={expandBgColor}
          filterType={filterType}
        ></DocType>
        <DocLists docTypeList={docTypeList} filterType={filterType}></DocLists>
      </div>
    </div>
  );
};
export default connect(({ writingTypeModel }) => ({ writingTypeModel }))(WriteHome);
